<template>
  <div>
    <a-modal :visible='showSubmit'
             title='学生信息'
             @ok='handleOk'
             @cancel='handleCancel'
             :confirm-loading='confirmLoading'
             :centered='true'
             :maskClosable='false'
             :width='550'>
      
      <a-form ref='elForm'
              :form='form'
              :labelAlign="'left'"
              okText='确认'
              cancel-text='取消'
              :label-col='{ span: 4 }' :wrapper-col='{ span: 15 }'>
        
        <a-form-item label='学号'>
          <a-input
            size="large"
            v-decorator="['studentId', { rules: [{ required: true, message: '通知内容不能为空或为模板内容' }] }]"
            :style="{width: '120%'}"
            :disabled='true'>
          </a-input>
        </a-form-item>
        
        <a-form-item label='姓名'>
          <a-input
            size="large"
            v-decorator="['nickName', { rules: [{ required: true, message: '通知内容不能为空或为模板内容' }] }]"
            placeholder='请输入学生姓名'
            :style="{width: '120%'}">
          </a-input>
        </a-form-item>
        
        <a-form-item label='分数'>
          <a-input-number
            :min='0'
            :max='100'
            :style="{width: '120%'}"
            v-decorator="['score', { rules: [{ required: true, message: '通知内容不能为空或为模板内容' }] }]"
            :disabled='true'>
          </a-input-number>
        </a-form-item>
        
        <a-form-item label='班级'>
          <a-input placeholder='请输入学生班级'
                   v-decorator="['clasz', { rules: [{ required: true, message: '通知内容不能为空或为模板内容' }] }]"
                   :style="{width: '120%'}">
          </a-input>
        </a-form-item>
        
        <a-form-item label='录取状态'>
          <a-select
            dafult-value='0'
            v-decorator="['enrollStatus', { rules: [{ required: true, message: '通知内容不能为空或为模板内容' }] }]"
            placeholder='请选择下拉选择'
            :style="{width: '120%'}">
            <a-select-option v-for='(item, index) in statusOptions' :key='index' :value='item.value'
                             :disabled='item.disabled'>{{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label='提交时间'>
          <a-input placeholder='请输入提交时间'
                   v-decorator="['updateTime', { rules: [{ required: true, message: '通知内容不能为空或为模板内容' }] }]"
                   :style="{width: '120%'}"
                   :disabled='true'></a-input>
        </a-form-item>
        
        
        <a-form-item label='邮箱'>
          <a-input placeholder='请输入学生邮箱'
                   v-decorator="['email', { rules: [{ required: true, message: '通知内容不能为空或为模板内容' }] }]"
                   :style="{width: '120%'}">
            <a-select slot="addonAfter" default-value="@qq.com" style="width: 150px">
              <a-select-option value="@qq.com">
                @qq.com
              </a-select-option>
              <a-select-option value="@163.com">
                @163.com
              </a-select-option>
              <a-select-option value="@yahoo.com">
                @yahoo.com
              </a-select-option>
              <a-select-option value="@gmail.com">
                @gmail.com
              </a-select-option>
            </a-select>
          </a-input>
        </a-form-item>
        
        <a-form-item label='性别'>
          <a-input placeholder='请输入学生性别'
                   v-decorator="['gender', { rules: [{ required: true, message: '通知内容不能为空或为模板内容' }] }]"
                   :style="{width: '120%'}" >
          </a-input>
        </a-form-item>
      </a-form>
    
    </a-modal>
  
  </div>
</template>
<script>

export default {
  props: {
    showSubmit: {
      type: Boolean,
      default: false
    },
    studentId: {
      type: String,
      required: true
    }
  },
  name: 'FormModelDialog',
  data() {
    return {
      showFormData: this.showFormData,
      // 确认按钮加载效果显示
      confirmLoading: false,
      statusOptions: [
        {
          'label': '进行中',
          'value': "0"
        },
        {
          'label': '未录取',
          'value': "1"
        },
        {
          'label': '已录取',
          'value': "2"
        }
      ],
      form: {}
    }
  },
  watch:{
    showSubmit(val, valOld){
      this.showFormData = val
    },
    studentId(val, valOld){
      this.form.studentId = val
    }
  },
  created() {
    // 根据props转递的studentId查询学生信息
    // 将信息赋值给form
    this.form = {
      studentId: this.studentId,
      name: '谢天浩',
      score: 100,
      clasz: '22软件工程5班',
      status: 2,
      updateTime: '2023-10-10 10:02',
      email: '1979214069',
      gender: '男'
    }
  },
  methods: {
    // TODO 发送请求
    handleOk() {
      console.log(this.form)
      this.sendDialogStatus()
    },
    // 取消
    handleCancel() {
      this.sendDialogStatus()
    },
    // 给父组件发送弹出状态并重置表单内容
    sendDialogStatus() {
      this.showFormData = !this.showFormData
      this.$emit('setDialogStatus', this.showFormData)
    }
  }
}

</script>
<style>
</style>
